<!-- eslint-disable vue/multi-word-component-names -->
<template>
<div>
    <van-nav-bar title="影院" fixed z-index placeholder ref="navbar" @click-left="handleLeft" @click-right="handleRight">
      <template #left>
        <span style="font-size:13px">{{$store.state.cityName}}</span> <van-icon name="arrow-down" size="6" color="#000"/>
      </template>
      <template #right>
        <van-icon name="search" size="26" color="#000"/>
      </template>
    </van-nav-bar>
    <div>    <!--class="box"-->
        <ul>
            <li v-for="data in $store.state.cinemaList" :key="data.cinemaId">
                <div class="left">
                    <div class="cinema_name">{{data.name}}</div>
                    <div class="cinema_address">{{data.address}}</div>
                </div>

                <div class="right">
                    <div class="cinema_price"><span>￥</span>{{data.lowPrice/100}}<span>起</span></div>
                    <div></div>
                </div>
            </li>
        </ul>
    </div>
</div>
</template>
<script>

// import BetterScroll from 'better-scroll'

export default {
  data () {
    return {
      cinemaslist: [],
      height: null
    }
  },
  mounted () {
    this.height = document.documentElement.clientHeight -
    this.$refs.navbar.$el.offsetHeight
    if (this.$store.state.cinemaList.length === 0) {
      this.$store.dispatch('getCinemaData', this.$store.state.cityId)
    }

    // this.$nextTick(() => {
    //   new BetterScroll('.box', {
    //     scrollbar: {
    //       fade: true
    //     }
    //   })
    // })
  },
  methods: {
    handleLeft () {
      this.$router.push('/city')

      // 点击清除数组
      this.$store.commit('clearcinemaList')
    },
    handleRight () {
      this.$router.push('/search')
    }
  }
}
</script>
<style lang="scss" scoped>
li{
    display: flex;
    justify-content: space-between;
    padding: 1.875rem;
}
.left{
    width: 35rem;
    height: 5.625rem;
    .cinema_name{
        font-size: 1.875rem;

    }
    .cinema_address{
        font-size: 1.5rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}
.right{
    height: 5.625rem;
    .cinema_price{
        font-size: 1.875rem;
        color:#ff5f16;
        span{
            font-size: 1.5rem;
        }
    }
}
// // #box{
//         height:;
//         overflow:hidden;
// //     position: relative;
// // }

</style>
